 <link href="{{$LAYOUT_HELPER_URL}}front/css/sorting.css" rel="stylesheet" />
<script src="{{$LAYOUT_HELPER_URL}}front/js/sorting.js"></script>

<script src="{{$LAYOUT_HELPER_URL}}front/js/zepto.min.js"></script>
	<script src="{{$LAYOUT_HELPER_URL}}front/js/zepto.dragswap.js"></script>
	<script>
	
	$(function() {
	$('#start').hide();
	$('#step1').hide();	
	});
	</script>
	
        

		
       <div id="main" class="container">
            <div class="row">
                <div class="span10 offset1">
                    <div class="row">
                        <div class="span2">
                            <h4>Create exercise</h4>
                        </div>
                        <button class="btn btn-primary pull-right">Export</button>
                    </div>
                    <div class="row form-horizontal">
                        <div class="control-group">
                            <label class="control-label" for="inputTitle">Title</label>
                            <div class="controls">
                                <input type="text" id="inputTitle" class="span4">
                            </div>
                        </div>
                    </div>
                    <form id="exForm" class="form-horizontal">
                        <div class="row">
                            <fieldset>
                                <legend>
								<h4 class="span2">Exercise 1</h4>
								
                                <div class="btn-toolbar span2 pull-right">
                                    <div class="btn-group">
                                        <a class="btn btnPreviewEx" href="#"><i class="icon-play"></i></a>
                                        <a class="btn btnMinEx" href="#"><i class="icon-minus"></i></a>
                                        <a class="btn btnRemoveEx" href="#"><i class="icon-remove"></i></a>
                                    </div>
                                </div></legend>
                                <div class="control-group">
                                    <label class="control-label" for="inputType1">Type</label>
                                    <div class="controls">
                                        <select class="span4">
										<option>Sort</option>
                                            <option selected="selected">. . . Insertion Sort</option>
                                                <option>. . . Selection Sort</option>
                                                <option>. . . Quick Sort</option>
                                                                            
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="toggleContent">
                                    
                                    <div class="control-group">
                                        <label class="control-label" for="inputNote1">Algorithm</label>
                                        <div class="controls">
                                             
										<textarea rows="13" class="span8">Algorithm InsertionSort ()
1. if (count > 1)
   1. current = 1
   2. loop (current < count )
	  1. temp = data[current]
	  2. walker = current - 1
	  3. loop (walker >=0) AND
		 (temp.key < data[walker].key)
		 1. data[walker+1] = data[walker]
		 2. walker = walker -1
	  4. data[walker+1]= temp
	  5. current = current + 1
End InsertionSort </textarea>
                                        </div>
                                    </div>
							
									<div class="control-group">
                                        <label class="control-label" for="inputNote1">Step</label>
                                        <div class="controls">
                                             
											<textarea rows="11" class="span8">
if(curr < count)
{
	var temp = data[curr];
	var walker = curr - 1;
	while((walker >=0)&&(temp < data[walker]))
	{
		data[(walker+1)] = data[walker];
		walker = walker - 1;
	}
	data[walker+1]= temp;
	curr = curr + 1;
}
</textarea>
                                        </div>
									</div>
									<div class="control-group">									
										<label class="control-label" for="inputArray2">Current</label>
										<div class="controls">
											<input type="text" id="sizeArray" value ="1" class="span3" />
										</div>	
                                    </div>
								</br>
			
			
			
			
	

							<ul class="nav nav-tabs" id="myTab">
								<li class="active"><a href="#manual" data-toggle="tab">Manual</a></li>
								<li><a href="#random" data-toggle="tab">Random</a></li>
							</ul>

		<div class="tab-content">
			<div class="tab-pane active" id="manual">
				<div class="control-group info">
					<label class="control-label" for="inputInfo">Value for sorting</label>
					<div class="controls">
						<input type="text" name="inputValue" style="width:230px" id="inputInfo">
						
						<button type="button" class="btn btn-info" onclick="addValue()">Add</button>
					</div>
		
				</div>
	
			</div>
			<div class="tab-pane" id="random">
				<div class="control-group">
					<label class="control-label" for="inputArray2">Size</label>
					<div class="controls">
						<input type="text" id="sizeArray" class="span3" />
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputArray2">Range</label>
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on">From</span>
							<input class="span1" id="fromArr" type="text">
						</div>
						<div class="input-prepend">
							<span class="add-on">To</span>
							<input class="span1" id="toArr" type="text">
						</div>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" for="inputArray2"></label>
					<div class="controls">
						
						<button type="button" class="btn" onclick="randomArray()">Generate</button>
					</div>
				</div>
			</div>
			<div class="valueSort">
				<ul class="sortable2 grid2" id="arrayValue" style="margin-left:178px;">					
				</ul>
			</div>
			
		</div>
	</div>

                                <div class="modal fade preview">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h3>Preview Exercise</h3>
                                    </div>
                                    <div class="modal-body">
                                        <p>Exercise preview.........</p>
                                    </div>
                                    <div class="modal-footer">
                                        <a href="#" class="btn btnCloseModal">Close</a>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </form>
					
                    <div class="addMoreQ row">
					<div class="btn-toolbar span2 pull-right">
                                    <div class="btn-group">
                                        <a class="btn btnPreviewEx" href="#"><i class="icon-play"></i></a>
                                        <a class="btn btnMinEx" href="#"><i class="icon-minus"></i></a>
                                        <a class="btn btnRemoveEx" href="#"><i class="icon-remove"></i></a>
                                    </div>
                                </div>
                            <div class="span2">
                                <button class="btn btnAddMoreQ btn-info">Add Exercise</button>
                            </div>
                            <div >
                                <select class="span1">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>
                </div>
            </div>
            
        </div>


  

    <!-- Tepmplate -->
    <script id="choiceTemplate" type="text/x-jquery-tmpl">
        <li>
            <div class="control-group">
                <label class="control-label" for="inputChoice1">
                    <input type="checkbox" value="b"></label>
                <div class="controls">
                    <div class="input-prepend input-append">
                        <span class="add-on">${c}</span>
                        <input class="span3" id="Text2" type="text">
                        <button class="btn btnRemoveChoice"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </div>
        </li>
    </script>

    <script id="exTemplate" type="text/x-jquery-tmpl">
        <div class="row" id="ex${num}">
            <fieldset>
                <legend><h4 class="span2">Exercise ${num}</h4>
                <div class="btn-toolbar span2 pull-right">
                    <div class="btn-group">
                        <a class="btn btnPreviewEx" href="#"><i class="icon-play"></i></a>
                        <a class="btn btnMinEx" href="#"><i class="icon-minus"></i></a>
                        <a class="btn btnRemoveEx" href="#"><i class="icon-remove"></i></a>
                    </div>
                </div></legend>
                <div class="control-group">
                    <label class="control-label" for="inputType1">Type</label>
                    <div class="controls">
                        <select class="span4">
                            <option>Multichoice</option>
                            <option>Sort</option>
                        </select>
                    </div>
                </div>
                <div class="toggleContent">
                    
                </div>

                <div class="modal hide fade preview">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3>Preview Exercise</h3>
                    </div>
                    <div class="modal-body">
                        <p>Exercise preview.........</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btnCloseModal">Close</a>
                    </div>
                </div>
            </fieldset>
        </div>
    </script>
